<template>
	<section>
		<el-card class="box-card">
			<el-form :model="editForm" label-width="100px" :rules="editFormRules" ref="editForm">
				<el-form-item label="用户名" prop="username" :rules="{required: true, message: '请输入用户名', trigger: 'blur'}">
					<el-input v-model="editForm.username" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="邮箱" prop="email" :rules="[
						{required: true, message: '请输入邮箱', trigger: 'blur'},
						{type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }]">
					<el-input v-model="editForm.email"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="password" :rules="{required: true, message: '请输入密码', trigger: 'blur'}">
						<el-input v-model="editForm.password"></el-input>
					</el-form-item>
					<el-form-item label="密码确认" prop="passwordConfirmation">
						<el-input v-model="editForm.passwordConfirmation"></el-input>
					</el-form-item>
					<el-form-item label="角色" prop="roleId" :rules="{type:'number' ,required: true, message: '请选择角色', trigger: 'change'}">
						<el-select v-model="editForm.roleId">
							<el-option v-for="item in roleOptions" :value="item.id" :label="item.name"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="城市" prop="cityCode" v-if="isNewPage" :rules="{required: true, message: '请选择城市', trigger: 'change'}">
						<el-select v-model="editForm.cityCode">
							<el-option-group v-for="group in cities" :label="group.text">
								<el-option v-for="item in group.children" :label="item.text" :value="item.value"></el-option>
							</el-option-group>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit">确定</el-button>
						<el-button @click="onReturn">返回</el-button>
					</el-form-item>
			</el-form>
		</el-card>
	</section>
</template>

<script>
	export default {
		created() {
			this.loadGridData()
			this.loadRoleOptions()
			this.loadCity()
		},
		data() {
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'))
				}
				else if (value !== this.editForm.password) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback()
				}
			}
			return {
				//编辑界面数据
				editForm: {
					id: '',
					username: '',
					email: '',
					password: '',
					passwordConfirmation: '',
					roleName: '',
					cityName: '',
					cityCode: '',
					roleId: null
				},
				isNewPage: false,
				editFormRules: {
					passwordConfirmation: [{ validator: validatePass, trigger: 'blur', required: true }]
				},
				roleOptions: {
					name: ''
				},
				cities: {
					text: ''
				}
			}
		},
		methods: {
			loadGridData() {
				let id = this.$route.params.id;
				this.isNewPage = id === undefined
				if (this.isNewPage) {
					return
				}
				else {
					this.axios.get(`admins/${id}`).then(response => {
						this.editForm = response.data
					})
				}
			},
			loadRoleOptions() {
				this.axios.get("/roles").then(response => {
					this.roleOptions = response.data
				})
			},
			loadCity() {
				this.axios.get("/cities").then(response => {
					this.cities = response.data
				})
			},
			//编辑 or 新增
			onSubmit: function () {
				var _this = this
				_this.$refs.editForm.validate((valid) => {
					if (!valid) {
						return
					}
					_this.$confirm('确认提交吗？', '提示').then(() => {
						_this.editLoading = true

						if (this.isNewPage) {
							_this.axios.post("/admins", _this.editForm).then(response => {
								_this.$notify({
									title: '成功',
									message: '提交成功',
									type: 'success'
								});
								_this.editLoading = false
								_this.loadGridData()
							}).then(() => { this.$router.push('/admins') })
						} else {
							let id = this.$route.params.id
							_this.axios.patch(`/admins/${id}`, _this.editForm).then(response => {
								_this.editLoading = false
								_this.$notify({
									title: '成功',
									message: '提交成功',
									type: 'success'
								})
							}).then(() => { this.$router.push('/admins') })
						}
					})
				})
			},
			onReturn: () => {
				window.history.back()
			}
		}
	}

</script>